
<template>
    <div>
        <el-select v-model="searchEntity.catId" @change="fetchData()" filterable placeholder="请选择分类">
                <el-option :key="0"
                :label="无"
                :value="全部"></el-option>
                <el-option
                v-for="item in exceptionCatList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>

            <el-select v-model="searchEntity.chapterId" @change="fetchData()" filterable placeholder="请选择章节">
                <el-option :key="0"
                :label="无"
                :value="全部"></el-option>
                <el-option
                v-for="item in chapterList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>

        <el-table :data="list" style="width: 100%">
        
            <el-table-column prop="title" label=" 标题" width="180"></el-table-column>
            <el-table-column prop="chapterName" label=" 章节" width="180"></el-table-column>
            <el-table-column prop="catName" label=" 分类" width="180"></el-table-column>
            <el-table-column prop="descrition" label=" 描述" width="180"></el-table-column>
            <el-table-column prop="userName" label="创建人" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="props">
                    <el-button type="primary" @click="changeBranch = true;handleEdit(props.row.id)" size="mini">详情</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog title="异常详情" :visible.sync="dialogFormVisible" width="1200" >
            <el-form >

                <el-form :inline="true" class="demo-form-inline">

                <img :src="userException.url" width="620px"/>

                <el-input type="text" :disabled="true" placeholder="分类" v-model="userException.catName" :maxlength="100" show-word-limit></el-input>
                <el-input type="text" :disabled="true" placeholder="章节" v-model="userException.chapterName" :maxlength="100" show-word-limit></el-input>
                <el-input type="text" :disabled="true" placeholder="标题" v-model="userException.title" :maxlength="10" show-word-limit> </el-input>  
                <el-input type="textarea" :disabled="true" placeholder="描述" v-model="userException.descrition" :maxlength="100" show-word-limit></el-input>
                <el-input type="textarea" :disabled="true" placeholder="分析" v-model="userException.analysis" :maxlength="100" show-word-limit></el-input>  
                <el-input type="textarea" :disabled="true" placeholder="解决" v-model="userException.solve" :maxlength="100" show-word-limit></el-input>                                                                   
                </el-form>           
            </el-form>

        </el-dialog> 

        <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total">
        </el-pagination>
    </div>
    
</template>
<script>
import scoreApi from '@/api/score'
import exceptionCatApi from '@/api/exceptionCat'
import chapterApi from '@/api/chapter'
import userExceptionApi from '@/api/userException'

export default {
    data(){
        return {
            exceptionCatList:[],
            chapterList:[],
            userException:{},
            currentPage: 1,
            pageSize: 10,
            total:1,
            searchEntity:{"title":"","catName":"","chapterName":""},
            list:[],
            fileList: [],   
            dialogFormVisible:false,      
            url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    },
    created(){
        this.fetchData();
    },
    methods:{

        fetchData(){


            //分页,查询异常列表
            userExceptionApi.search(this.searchEntity,this.currentPage,this.pageSize).then(response => {
                this.list=response.data.content;
                this.total=response.data.totalElements;
            });


            //查询章节
            chapterApi.findAll().then(response => {
                this.chapterList=response.data;
            });

                        //查询分类
            exceptionCatApi.findAll().then(response => {
                this.exceptionCatList=response.data;
            });

        },

        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                userExceptionApi.search(this.searchEntity,this.currentPage,this.pageSize).then(response => {
                this.list=response.data.content;
                this.total=response.data.totalElements;
            });
        },
         handleEdit(id){
            this.dialogFormVisible=true;//打开窗口
            //调用查询
            if(id!=''){
                userExceptionApi.findById(id).then( response=>{
                    if(response.flag){
                        this.userException=response.data;
                    }
                })                   
            }else{
                this.userException = {};
            }

        },
        findOne(){
            
        }
    }
}
</script>